<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 150px;
        }

        li {
            float: left;
            margin-left: 60px;
            list-style: none;
        }

        button {
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <img src="../img/1.jpg" alt=""><br>
                <button class="btn">点赞0</button>
            </li>
            <li>
                <img src="../img/2.jpg" alt=""><br>
                <button class="btn">点赞0</button>
            </li>
            <li>
                <img src="../img/3.jpg" alt=""><br>
                <button class="btn">点赞0</button>
            </li>
            <li>
                <img src="../img/4.jpg" alt=""><br>
                <button class="btn">点赞0</button>
            </li>
        </ul>
    </div>
</body>
<script>
    let btn = document.querySelectorAll('.btn')
    //方法1
    // let n = btn.length
    // for (let i = 0; i < n; i++) {
    //     let count = 0
    //     btn[i].onclick = function () {
    //         this.innerHTML = `点赞(${++count})`
    //         console.log(count)
    //     }
    // }

    //方法2
    // {
    //     let count = 0
    //     btn[0].onclick = function () {
    //         this.innerHTML = `点赞(${++count})`
    //     }
    // } {
    //     let count = 0
    //     btn[1].onclick = function () {
    //         this.innerHTML = `点赞(${++count})`
    //     }
    // } {
    //     let count = 0
    //     btn[2].onclick = function () {
    //         this.innerHTML = `点赞(${++count})`
    //     }
    // } {
    //     let count = 0
    //     btn[3].onclick = function () {
    //         this.innerHTML = `点赞(${++count})`
    //     }
    // }
    //方法3
    for (let i = 0; i < btn.length; i++) {
        let count = 0
        btn[i].onclick = getValue()

    }
    //点击增加点赞数的闭包
    function getValue() {
        let count = 0
        return function () {
            this.innerHTML = `点赞(${++count})`
        }
    }
</script>

</html>